State and Component Re-rendering are important concepts in React JS. State stores information that can change over time, while re-rendering is the process in which React calls a component again to determine what the user interface should display. When state changes, React can re-render the component and update the necessary parts of the interface.
Learn more: JustAcademy React JS Training Course | Register for React JS Course Demo
State is data that a React component remembers between renders. It allows a component to display changing information based on user actions, application events, or other updates.
Examples of state include:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default Counter;Explanation: The state variable count starts at 0. When the user clicks the button, setCount() requests a state update. React renders the component again and displays the new count.
Rendering in React means calling a component function to calculate what should appear in the user interface. React uses the component's current props, state, and context to determine the JSX it returns.
For example:
function Welcome() {
return <h1>Welcome to React JS!</h1>;
}
export default Welcome;When React renders this component, it evaluates the function and determines that a heading should appear on the screen.
Component re-rendering means React calls a component again after its initial render to calculate the latest user interface.
A re-render may happen when:
import { useState } from 'react';
function Message() {
const [message, setMessage] = useState('Hello');
return (
<div>
<p>{message}</p>
<button onClick={() => setMessage('Welcome!')}>
Change Message
</button>
</div>
);
}
export default Message;How it works:
setMessage('Welcome!') requests a state update.State and re-rendering work together to keep the user interface synchronized with the component's data.
User performs an action
↓
Event handler executes
↓
State setter is called
↓
React schedules a render
↓
Component function runs again
↓
React compares the new output
↓
Necessary DOM changes are committed
↓
Browser displays the updated interfaceFor example, when a user clicks an Add to Cart button, React can update the cart quantity in state and render the new quantity on the screen.
Calling a state setter can schedule a re-render.
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}When the state changes from 0 to 1, React renders the component again with the updated value.
Props are values passed from a parent component to a child component. When a parent supplies new props, React normally renders the child again.
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}
function App() {
const [name, setName] = useState('Amit');
return (
<div>
<Greeting name={name} />
<button onClick={() => setName('Priya')}>
Change Name
</button>
</div>
);
}When the parent's name state changes, it passes the updated name to Greeting, and the child renders with the new prop.
A component that reads a context value can re-render when that context value changes.
Context is useful for sharing information such as a theme, language preference, or authenticated user across multiple components without passing props through every intermediate component.
By default, when a parent component re-renders, React also renders its child components as it processes the updated component tree. This can happen even when a child's props appear unchanged. Memoization can sometimes skip a child render when its props have not changed.
The useState() Hook lets functional components store state and request updates.
const [state, setState] = useState(initialValue);| Part | Description |
|---|---|
useState() |
React Hook used to declare state. |
state |
The current state value for the render. |
setState |
The function used to request a state update. |
initialValue |
The starting state value used during initialization. |
import { useState } from 'react';
function Toggle() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle
</button>
{isVisible && <p>This message is visible.</p>}
</div>
);
}
export default Toggle;When the user clicks the button, the Boolean state changes. React re-renders the component and conditionally displays or hides the message.
No. A state update can cause React to render a component without requiring a visible DOM change.
React compares the output of the new render with the previous output. If the rendered result is the same, React may not need to modify the DOM.
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(0)}>
Set Count to Zero
</button>
</div>
);
}
export default Example;If count is already 0, calling setCount(0) supplies the same primitive value. React can skip rendering work for that state update. React's internal scheduling and development behavior can affect exactly when component functions are called, so avoid relying on render counts for application logic.
Calling a state setter does not change the state variable in the currently executing render. The next value becomes available when React renders the component again.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
console.log(count);
}
return (
<button onClick={handleClick}>
Count: {count}
</button>
);
}
export default Counter;When the button is clicked for the first time, the console can display 0 even though React subsequently renders the button with Count: 1. The event handler reads the state value from the render in which that handler was created.
setCount(previousCount => previousCount + 1);This approach calculates the next value from the pending previous state and is especially useful when multiple updates are queued.
React updates the user interface through three main steps.
A render is triggered by the initial display or by an update such as a state change. New props or context values can also lead to rendering.
React calls the component functions to calculate the latest JSX output. Rendering should be a pure calculation: it should not directly change external data or perform side effects.
React applies the necessary changes to the DOM. If the new output does not require a DOM change, React may leave the DOM unchanged.
Trigger → Render → CommitThis process helps React update the interface efficiently instead of rebuilding every DOM element for every render.
React applications are usually built as component trees. A state update in a parent component can cause the parent and its descendants to render again as React processes the tree.
import { useState } from 'react';
function Child({ message }) {
console.log('Child rendered');
return <p>{message}</p>;
}
function Parent() {
const [count, setCount] = useState(0);
console.log('Parent rendered');
return (
<div>
<p>Count: {count}</p>
<Child message="Hello from Child" />
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default Parent;When the count changes, the parent re-renders. Under normal rendering behavior, React also renders the child while processing the updated tree, even though the child's message prop remains the same.
Note: Console logs are useful for learning, but render counts can vary because React may batch work, skip unnecessary work, or perform additional development checks.
React.memo() is a performance optimization that can allow React to skip rendering a function component when its props have not changed according to a shallow comparison. It does not prevent the component from re-rendering when its own state or a context it uses changes.
import { memo, useState } from 'react';
const Greeting = memo(function Greeting({ name }) {
console.log('Greeting rendered');
return <h3>Hello, {name}!</h3>;
});
function App() {
const [name, setName] = useState('Amit');
const [count, setCount] = useState(0);
return (
<div>
<Greeting name={name} />
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increase Count
</button>
<button onClick={() => setName('Priya')}>
Change Name
</button>
</div>
);
}
export default App;Explanation:
Use memoization when there is a meaningful performance benefit. It is not necessary for every component.
| Rendering | Re-rendering |
|---|---|
| Includes the initial calculation of a component's output. | Refers to subsequent calculations of the component's output. |
| Occurs when the component first appears. | Can occur after state, props, or context changes, or when its parent renders. |
| React determines the initial UI. | React calculates the latest UI and compares it with the previous output. |
| Initial DOM elements may be created and committed. | Only necessary DOM changes are committed. |
Not all re-renders are bad. React is designed to render components efficiently. Optimize only when there is a real performance problem or a clear benefit.
useState() for data that affects what the component displays.React.memo(), useMemo(), or useCallback() only when they help with a specific performance need.This example demonstrates how updating state causes a component to render the latest input and character count.
import { useState } from 'react';
function CharacterCounter() {
const [text, setText] = useState('');
return (
<div>
<h2>Character Counter</h2>
<textarea
value={text}
onChange={event => setText(event.target.value)}
placeholder="Type something..."
/>
<p>Characters: {text.length}</p>
<p>Your text: {text}</p>
<button onClick={() => setText('')}>
Clear
</button>
</div>
);
}
export default CharacterCounter;text state starts as an empty string.onChange handler updates the state.Component re-rendering means React calls a component again to calculate the latest UI output.
Common reasons include a state update, new props, a changed context value, or a parent component rendering again.
No. React compares the new output with the previous output and commits only necessary DOM changes.
Calling its setter requests a state update. React then schedules rendering work when appropriate.
No. The state variable in the currently executing render retains its existing value. The next value is available in a subsequent render.
React.memo() is an optimization that can skip rendering a function component when its props have not changed under a shallow comparison.
Yes. For example, a parent re-render normally causes React to render its child components too, unless React can skip that work through an optimization or other rendering behavior.
Render calculates what the UI should look like. Commit applies the necessary changes to the DOM.
Pure rendering makes the UI predictable and allows React to render, pause, retry, or discard render work safely.
No. Re-rendering is a normal part of React. Developers should focus on measuring and addressing unnecessary work rather than trying to prevent every render.
console.log() to observe parent and child rendering during practice.React.memo() to optimize a child component whose props remain unchanged.React.memo().State and component re-rendering are fundamental concepts in React JS. State stores changing information, and state updates can cause React to render a component again. React then compares the latest output with the previous output and commits the necessary DOM changes. By understanding this process, writing pure rendering logic, updating state correctly, and optimizing only when needed, developers can create interactive and efficient React applications.
To learn more, visit JustAcademy React JS Training Course or register for a React JS course demo.
